<template>
  <div class="container">
    <div class="header">稼动率</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script>
  import commomOption from './commomOption.js';
  import * as echarts from 'echarts';
  let color = ['#5470c6', '#fac858', '#73c0de', '#ee6666', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
  function SeriesData(letftTitle, tableHead, dataArr) {
    let arr = [];
    let totalArr = [];
    for (var i = 0; i < letftTitle.length; i++) {
      let arr2 = [];
      for (var e = 0; e < tableHead.length; e++) {
        let obj = dataArr.find(x => x.Title == tableHead[e]);
        if (Object.keys(obj).find(x => x == letftTitle[i])) {
          let a = obj[Object.keys(obj).find(x => x == letftTitle[i])];
          arr2.push(a);
        }
      }
      // 将数据汇总
      totalArr.push(arr2);
      let obj = {
        name: letftTitle[i],
        type: 'bar',
        stack: 'total',
        barWidth: '20%', // Set the bar width
        barMaxWidth: '50%', // Set the maximum bar width
        label: {
          show: true,
          position: 'top',
        },
        yAxisIndex: 0,
        data: arr2,
      };
      arr.push(obj);
    }
    return arr;
  }

  // 绘制表格数据
  function DrawTable(value, totalArr) {
    let str = '';
    str += '{table|' + value + '}\n{table|';
    for (let i = 0; i < totalArr.length; i++) {
      str += totalArr[i][i] + '}\n{table|';
    }
    str += '}';
    return str;
  }
  function fucIcon(letftTitle) {
    let obj = {};
    for (var i = 0; i < letftTitle.length; i++) {
      obj[i] = { fontSize: 20, color: color[i] };
    }
    return obj;
  }
  // 左侧标题显示
  function ForName(NameArr) {
    let TitleName = '';
    for (var i = 0; i < NameArr.length; i++) {
      TitleName += '{' + i + '|● }' + NameArr[i] + '\n';
    }
    return TitleName;
  }
  // 绘制表格线
  function getTableLine(letftTitle) {
    var list = [];
    var num = letftTitle.length + 1;
    var bottom = letftTitle.length * 30 + 65; // 可根据表格行数高度动态调整
    var height = 30; // 表格线行高
    // 添加边界线
    list.push({
      type: 'line',
      left: 25,
      bottom: bottom + 30 - num * height,
      style: {
        fill: '#333',
      },
      // 线条
      shape: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: (num - 1) * height,
      },
    });

    // 循环绘制表格
    for (var i = 0; i < num; i++) {
      list.push({
        type: 'line',
        bottom: bottom - i * height,
        right: 80,
        style: {
          fill: '#333',
        },
        // 线条
        shape: {
          x1: 0,
          y1: 0,
          x2: 830,
          y2: 0,
        },
      });
    }
    return list;
  }
  export default {
    props: {
      data: {
        default: () => {
          return {
            xMonthTicket: [],
            lineData: [[]],
          };
        },
        typeof: Object,
      },
    },
    data() {
      return {
        myChart: null,
        NameArr: [],
        letftTitle: ['测试1', '测试2', '测试3', '测试4'],
        dataArr: [
          {
            测试1: 24,
            测试2: 12,
            测试3: 67,
            测试4: 54,
            测试5: 23,
            测试6: 56,
            Title: '表头1',
          },
          {
            测试1: 24,
            测试2: 78,
            测试3: 24,
            测试4: 22,
            测试5: 24,
            测试6: 56,
            Title: '表头2',
          },
          {
            测试1: 24,
            测试2: 12,
            测试3: 78,
            测试4: 66,
            测试5: 87,
            测试6: 56,
            Title: '表头3',
          },
          {
            测试1: 24,
            测试2: 54,
            测试3: 35,
            测试4: 75,
            测试5: 54,
            测试6: 56,
            Title: '表头4',
          },
          {
            测试1: 24,
            测试2: 87,
            测试3: 25,
            测试4: 57,
            测试5: 24,
            测试6: 56,
            Title: '表头5',
          },
          {
            测试1: 24,
            测试2: 75,
            测试3: 24,
            测试4: 35,
            测试5: 24,
            测试6: 56,
            Title: '表头6',
          },
          {
            测试1: 24,
            测试2: 77,
            测试3: 57,
            测试4: 85,
            测试5: 24,
            测试6: 56,
            Title: '表头7',
          },
          {
            测试1: 24,
            测试2: 7,
            测试3: 75,
            测试4: 12,
            测试5: 24,
            测试6: 56,
            Title: '表头8',
          },
        ],
      };
    },

    watch: {
      data: {
        handler() {
          var tableHead = [];
          for (var e = 0; e < this.dataArr.length; e++) {
            tableHead.push(this.dataArr[e].Title);
          }
          // 左侧标题
          // 绘制表格线行数
          var lineList = getTableLine(this.letftTitle);
          let color = ['#5470c6', '#fac858', '#73c0de', '#ee6666', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];

          var totalArr = [];
          const option = {
            // 颜色配置
            color: color,
            legend: {
              orient: 'horizontal',
              bottom: 10,
              data: this.letftTitle,
            },
            // 左侧标题配置
            title: [
              { text: '各地区大数据产业对外投资金额', left: 'center' },
              {
                text: ForName(this.NameArr),
                bottom: 30 - this.letftTitle.length,
                left: 30,
                textStyle: {
                  lineHeight: 30,
                  fontSize: 13,
                  fontWeight: 'normal',
                  formatter: function (value) {
                    return '{table|' + value + '}';
                  },
                  rich: fucIcon(this.letftTitle),
                },
              },
            ],
            // 表格边距配置
            grid: {
              bottom: this.letftTitle.length * 30 + 100, // 可根据表格行数动态调整高度
              left: 100,
              right: 80,
              top: 50,
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: true,
                data: tableHead,
                axisTick: {
                  length: this.letftTitle.length * 30 + 35,
                },
                axisLabel: {
                  formatter: function (value, index) {
                    var indexNum = 0;
                    for (var i = 0; i < tableHead.length; i++) {
                      if (value == tableHead[i]) {
                        indexNum = i;
                      }
                    }
                    return DrawTable(value, totalArr);
                  },
                  rich: {
                    table: {
                      height: 30, //表格内数据行高
                      lineHeight: 30,
                      align: 'center',
                      verticalAlign: 'bottom',
                    },
                  },
                },
              },
            ],
            yAxis: [
              {
                type: 'value',
                name: '对外投资金额（万元）',
                nameGap: 50, // y轴name与横纵坐标轴线的间距
                nameLocation: 'middle', // y轴name处于y轴的什么位置
                nameTextStyle: {
                  fontSize: 14,
                  fontWeight: 700,
                },
                scale: true,
                minInterval: 1,
                splitLine: {
                  show: true,
                },
                min: function (v) {
                  return Math.max(v.min - 10, 0);
                },
              },
            ],

            series: SeriesData(this.letftTitle, tableHead, this.dataArr),
            graphic: lineList,
          };
          this.echartInit(option);
        },
        immediate: true,
      },
    },
    methods: {
      // echarts初始化
      echartInit(option) {
        if (this.myChart) {
          this.myChart.setOption(option);
          return false;
        }

        this.$nextTick(() => {
          this.myChart = echarts.init(this.$refs.echartsBox);

          option && this.myChart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener('resize', () => {
            this.myChart.resize();
          });
        });
      },
    },
  };
</script>
<style lang="scss" src="./container.scss" scoped></style>
